<template>
  <div class="find-car-from page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
    <!-- <van-nav-bar title="寻车" fixed placeholder :border='false'>
      <template #left>
        <van-icon
        name="arrow-left"
        size="18"
        @click="goback"
        />
      </template>
    </van-nav-bar> -->
    
    <navbar :title="title"></navbar>
    <div class="car-info">
      <van-form :show-error="false">

        <van-field
          v-model="carType"
          is-link
          readonly
          name="carType"
          label="车辆信息"
          placeholder="请选择车辆类型"
          @click="jmupToBrand"
          required
          :class="isCarType?'special':''"
          class="special-padding"
          size="large"
          input-align="right"
        />

        <van-field
        label="联系电话"
        placeholder="请输入电话号码"
        :required="true"
        type="tel"
        v-model="findCarFrom.contactWay"
        name="phone"
        :rules="[{ validator, message: '请输入正确手机号' }]"
        :class="isActive?'special':''"
        class="special-padding"
        size="large"
        input-align="right"
        ></van-field>

        <!--  -->

        <div class="special-font" >
          <span >备注</span>
        </div>


        <van-field
        name="remark"
        placeholder="请输入相关备注信息"
        type="textarea"
        v-model="findCarFrom.remark"
        size="large"
        class="remark"
        ></van-field>

        <!-- <textarea placeholder="请输入相关备注信息" class="remark"></textarea> -->

        <div class="but">
          <van-button  block type="info" @click="cutOutTime" :color="color" :disabled="disabled">提交</van-button>
        </div>
      </van-form>

    </div>

  </div>
</template>

<script>
import { Toast } from 'vant'
  import { areaList } from '../../../node_modules/@vant/area-data'
  import { getFindForm } from './api'

  export default{
    data() {
      return {
        // header栏 => 标题
        title:"寻车",
        
        loading: false,
        columns: [],
        show: false,
        carTypeShow:'',
        findCarFrom: {
          brand: '', // 车品牌名称
          carModels: '', // 车型
          contactWay: '',  // contactWay 联系方式
          remark: '', // 备注
          vnId: '', // 品牌id
          vtdId: '' // 车型id
        },
        carType: '',
        showArea: false,
        areaList,
        value: '',
        showPicker: false,
        isActive: false,
        isCity: false,
        isCarType: false,
        color: '#E6E6E6',
        // 获取屏幕状态栏高度
        phoneStatusBarHeight:'',
        changeTime: new Date().getTime(), // 当前时间
        disabled: false
      }
    },
    methods: {
      // 校验函数返回 true 表示校验通过，false 表示不通过
      validator(val) {
        //手机号验证正则
        const tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        if(val != '' && tel.test(val)) {
          this.isActive = false
          this.mobileCheckBy = true
          this.color = '#F6C401'
          // console.log(1)
          return true
        } else {
          this.isActive = true
          this.mobileCheckBy = false
          // console.log(2)
          this.color = '#E6E6E6'
          return false
        }
      },
      // tabbar的左箭头跳转路由
      goback() {
        this.$router.go(-1)
      },
      // 跳转到品牌选择页面
      jmupToBrand(){
        this.$router.push({
          name: 'SelectBrand',
          query:{
            myName:'FindCarForm'
          }
        })
      },
      // 定时器
      cutOutTime() {
        this.changeTime = new Date().getTime()
        setTimeout(() => {
          if(new Date().getTime() - this.changeTime >= 1000) {
            this.Submit()
          }
        }, 1000)
      },

      // 提交表单
      async Submit() {
        this.disabled = true
        let someInfo = this.$route.query
        this.findCarFrom.brand = someInfo.brand
        this.findCarFrom.carModels = someInfo.carType
        this.findCarFrom.vnId = someInfo.vnid
        this.findCarFrom.vtdId = someInfo.vtdId
        this.findCarFrom.carModelGuidePrice = someInfo.carModelGuidePrice
        if(this.findCarFrom.brand == '' || this.findCarFrom.carModels == '' || this.findCarFrom.vnId == '' || this.findCarFrom.vtdId == '' || this.findCarFrom.brand == null || this.findCarFrom.carModels == null || this.findCarFrom.vnId == null || this.findCarFrom.vtdId == null) return Toast('请选择品牌车型！')

        if(this.validator(this.findCarFrom.contactWay)) {
          const res = await getFindForm(this.findCarFrom)
          if(res.code === 0) {
            this.disabled = true
            this.$notify({
              message: '已成功提交寻车申请，我们的工作人员会在1-5个工作日与您取得联系，请耐心等待！',
              type: 'success',
              duration: 1000
            });
          // 修改提示栏距离顶部高度
          this.$nextTick(()=>{
            document.querySelector('.van-popup--top').style.top = this.phoneStatusBarHeight
          })
            setTimeout(()=>{
              this.$router.push({
                path:'/findcar/findCarRecord'
              })
            },1500)
          } else if (res.code === -1) {
            this.$notify({
              message: "大量用户提交申请，请稍后再试",
              type: 'danger'
            });
            this.disabled = false
          }else {
            this.disabled = false
            this.$notify({
              message: res.msg,
              type: 'danger'
            });
          }
        }
        
      },
      // 获取路由链接上拼接的token值
      getTokenInUrl() {
        var url = window.location.href;
        if (url.indexOf("token") > 0) {
          let getTokenParams = window.location.href.split("token=")[1];
          getTokenParams=getTokenParams.split("&")[0];
          if (getTokenParams.length >= 32) {
            getTokenParams = getTokenParams.substr(0, 32);
            console.log('%c [ getTokenParams ]', 'font-size:13px; background:pink; color:#bf2c9f;', getTokenParams)
            sessionStorage.setItem("token", getTokenParams);
          }
        }
      }
    },
    created() {
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
      // 修改页面标题
      document.title = "寻车"
      // 获取路由链接上拼接的token值
      this.getTokenInUrl()
    },
    mounted() {
      // 背景颜色
      document.querySelector('body').setAttribute('style', 'background-color:#F8F8F8')
      console.log(this.$route.query)
      this.carType = this.$route.query.carType
    }
  }
</script>


<style lang="less">
  /* .van-cell--large .van-cell__title{
    color: #666666;
    font-family: PingFangSC-Regular, PingFang SC ;
    font-weight: 400;
    font-size: 16px;
  }
  .van-field__control{
    font-size: 16px;
  }
  .van-picker__confirm {
    color: #F6C401 !important;
  }
  .van-picker__cancel, .van-picker__confirm{
    font-size: 16px !important;
  } */
</style>
<style scoped lang="less">
  .find-car-from{
    background-color: #F8F8F8;
    width: 100%;
    // display: fixed;
  }
  .special-padding{
    padding: 20px 16px !important;
  }
  .remark{
    border: none;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #B3B3B3;
    padding: 0 16px;
    height: 100px;
    width: 100%;
  }
  .special-font{
    padding: 16px 16px 0 16px;
    background-color: white;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
  .special{
    border: 1px solid red;
  }
  .car-info{
    .van-cell--required::before{
      left: 23vw !important;
      font-size: 16px;
    }
    .but{
      margin: 20px 12px;
      .van-button{
        color: black !important;
        font-size: 17px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }
  }
</style>
